<template>
  <div class="system-user-dialog-container">
    <el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')"
               draggable v-model="visible">
      <el-form :model="dataForm" :rules="dataRules" label-width="120px" ref="dataFormRef" v-loading="loading">
        <el-row >
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.barcodetypename')" prop="barcodeTypeName">
              <el-select filterable clearable v-model="dataForm.barcodeTypeName" @change="barcodeTypeNameChange" >
                <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in barcodeTypeNameData">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.barcodeTypeCode')" prop="barcodeTypeCode">
              <el-input clearable disabled v-model="dataForm.barcodeTypeCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.barcode')" prop="barcode">
              <el-input v-model="dataForm.barcode" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.barcodeStatus')" prop="barcodeStatus">
              <el-select filterable clearable v-model="dataForm.barcodeStatus"  >
                <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in barcodeStatusData">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.qcStatus')" prop="qcStatus">
              <el-select filterable clearable v-model="dataForm.qcStatus"  >
                <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in qcStatusData">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.materialname')" prop="materialName">
              <!--<el-select filterable clearable  v-model="dataForm.materialName" @change="materialChange" remote :remote-method="getMaterial">
                <el-option :key="item.id" :label="item.realMaterialName" :value="item.id" v-for="item in materialData">
                  <span style="float:left;">{{ item.realMaterialName }}</span>
                  <span style="float:left;margin-left: 10px">{{ item.materialCode }}</span>
                </el-option>
              </el-select>-->
              <MaterialSelect @change="materialChange" v-model="dataForm.materialName" label="materialName" />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.materialcode')" prop="materialcode">
              <el-input v-model="dataForm.materialCode" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.unit')" prop="unit">
              <el-input v-model="dataForm.unit" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.materialspec')" prop="materialspec">
              <el-input v-model="dataForm.materialSpec" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.processName')" prop="processName">
              <el-select filterable clearable  v-model="dataForm.processName" @change="processChange" >
                <el-option :key="item.id" :label="item.processName" :value="item.processCode" v-for="item in processData">
                  <span style="float:left;">{{ item.processName }}</span>
                  <span style="float:left;margin-left: 10px">{{ item.processCode }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.processCode')" prop="processCode">
              <el-input v-model="dataForm.processCode" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.warehousename')" prop="warehouseCode">
              <el-select filterable clearable v-model="dataForm.warehouseCode"  @change="warehouseChange">
                <el-option :key="item.warehouseCode" :label="item.warehouseName" :value="item.warehouseCode" v-for="item in warehousData">
                  <span style="float:left;">{{ item.warehouseName }}</span>
                  <span style="float:left;margin-left: 10px">{{ item.warehouseCode }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.locationname')" prop="locationCode">
              <el-select filterable clearable v-model="dataForm.locationCode"  >
                <el-option :key="item.locationCode" :label="item.locationName" :value="item.locationCode" v-for="item in locationData">
                  <span style="float:left;">{{ item.locationName }}</span>
                  <span style="float:left;margin-left: 10px">{{ item.locationCode }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.currentqty')" prop="currentqty">
              <el-input v-model="dataForm.currentqty" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.creationTime')" prop="creationTime">
              <el-date-picker
                v-model="dataForm.creationTime"
                type="date"
                style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.productionLineCode')" prop="productionLineCode">
              <el-input v-model="dataForm.productionLineCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item :label="$t('bar.batchNumber')" prop="batchNumber">
              <el-input v-model="dataForm.batchNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false" icon="close">{{ $t('common.cancelButtonText') }}</el-button>
					<el-button @click="onSubmit" type="primary" icon="check" :disabled="loading">{{
              $t('common.confirmButtonText')
            }}</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" name="spDialog" setup>
import {useMessage} from '/@/hooks/message';
import { getSpBarcode} from '/@/api/platform/wms/sp';
import { getAllMaterials,getAllProcess,getAllWarehouse,insertBarcode,getLocationLists} from '/@/api/platform/wms/reprintbarcode';
import { getAllMaterialsForNameOrCode} from '/@/api/platform/digital/basProcess'
import { ref,reactive } from 'vue';
import MaterialSelect from '/@/components/mes/select/MaterialSelect.vue';
// 通知父组件刷新
const emit = defineEmits(['refresh']);
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const materialData = ref<any[]>([]);
const locationData = ref<any[]>([]);
const processData = ref<any[]>([]);
const warehousData = ref<any[]>([]);
  
const loading = ref(false);
const size = ref<'default' | 'large' | 'small'>('default');
import {useI18n} from 'vue-i18n';
const {t} = useI18n();

const dataForm = reactive({

});

const dataRules = ref({
  barcodeTypeName: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ],
  barcodeTypeCode: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ],
  barcode: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ],
  barcodeStatus: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ],
  qcStatus: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ],
  materialCode: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ],
  unit: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ],
  materialSpec: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ],
  warehouseCode: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ],
  locationCode: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ],
  currentqty: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ],
  creationTime: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ],
  batchNumber: [
    {required: true, message: t('bar.cannotEmpty'), trigger: 'blur'},
  ]
  
});

// 打开弹窗
const openDialog = async (id: string) => {
  visible.value = true;

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  getWarehouse();
  getMaterials();
  getProcess();
};
const barcodeTypeNameData = ref([
	{ label: t('bar.rawMaterials'), value: 'rawMaterials' },
	{ label: t('bar.semiFinishedProducts'), value: 'semiFinishedProducts' },
]);
const barcodeStatusData = ref([
	{ label: t('bar.init'), value: 'init' },
	{ label: t('bar.inStock'), value: 'inStock' },
  { label: t('bar.outStock'), value: 'outStock' },
  { label: t('bar.checkDel'), value: 'checkDel' },
]);
const qcStatusData = ref([
	{ label: t('bar.waitCheck'), value: 'waitCheck' },
	{ label: t('bar.pass'), value: 'pass' },
  { label: t('bar.fail'), value: 'fail' },
]);
//条码类型变更
const barcodeTypeNameChange=(value)=>{
  if(value==''){
    dataForm.barcodeTypeCode=null;
    return;
  }
  dataForm.barcodeTypeCode=value;
  //根据标签类型自动获取标签号
  getBarcode(value);
}
//物料变更
const materialChange=(value)=>{
  if(value==null){
    dataForm.materialSpec=null;
    dataForm.materialCode=null;
    dataForm.unit=null;
    return;
  }
  
  //let filteredMaterial = materialData.value.filter(material=>material.id==value);
  //dataForm.materialSpec=filteredMaterial[0].specification;
  //dataForm.materialCode=filteredMaterial[0].materialCode;
  //dataForm.unit=filteredMaterial[0].unit;
  dataForm.materialSpec=value.specification;
  dataForm.materialCode=value.materialCode;
  dataForm.unit=value.unit;
}
//工序变更
const processChange=(value)=>{
  if(value==''){
    dataForm.processCode=null;
    return;
  }
  dataForm.processCode=value;
}
//仓库选择加载货位
const warehouseChange=(value)=>{
  if(value==''){
    locationData.value=null;
    return;
  }
  dataForm.locationCode=null;
  getLocationLists({"WarehouseCode":value}).then((res) => {
    locationData.value =res.data;
  });
}
// 获取标签号
const getBarcode = (value) => {
  var ruleCode="";
  switch(value){
    case "rawMaterials":
      ruleCode="RawMaterial";
      break;
    case "semiFinishedProducts":
      ruleCode="SemiFinishMaterial";
      break;

  }
  getSpBarcode({ruleCode:ruleCode}).then((res) => {
    if(res.data.item1){
      dataForm.barcode = res.data.item2;
    }
    else{
      useMessage().error(res.data.item2);
    }
    
  });
};
// 获取仓库
const getWarehouse = () => {
  getAllWarehouse().then((res) => {
    warehousData.value =res.data;
  });
};
// 获取物料
const getMaterials = () => {
  getAllMaterials().then((res) => {
    materialData.value =res.data;
    
  });
};

//获取工序
const getProcess=()=>{
  getAllProcess({}).then((res) => {
    processData.value =res.data;
    
  });
}
// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => {
  });
  if (!valid) return false;

  try {
      loading.value = true;
      await insertBarcode(dataForm).then((res)=>{
        if(!res.ok){
          useMessage().error(res.data);
        }
      });
      visible.value = false; // 关闭弹窗
      emit('refresh');
  } catch (error: any) {
    useMessage().error(error.msg);
  } finally {
    loading.value = false;
  }
};
const getMaterial = (query: string) => {
    getAllMaterialsForNameOrCode({
        "materialCode": query
    }).then((res: any) => {
        if (res.code == 0) {
          materialData.value = res.data
        }
    })
}
// 暴露变量
defineExpose({
  openDialog,
});
</script>
